<template>
  <div class="review_qualify_table">
    <div class="filter_box">
      <el-form
        :inline="true"
        :model="queryParams"
        class="demo-form-inline"
      >
        <el-form-item label="企业名称">
          <el-input
            placeholder="请输入企业名称"
            clearable
          />
        </el-form-item>

        <el-form-item label="法人姓名">
          <el-input
            placeholder="请输入法人姓名"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>清空</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table_box">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="businessName"
          label="企业名称"
        />
        <el-table-column
          prop="businessLocation"
          label="企业所在地"
        />
        <el-table-column
          prop="ownerName"
          label="法人姓名"
        />
        <el-table-column
          prop="ownerContact"
          label="法人联系方式"
        />
        <el-table-column
          prop="reviewStatus"
          label="审核状态"
        />

        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="handleVerify(scope)"
            >
              审核
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-affix position="bottom" :offset="20">
      <div class="pagination_box">
        <Pagination
          v-model:currentPage="queryParams.currentPage"
          v-model:pageSize="queryParams.pageSize"
          :total="queryParams.total"
          @pageChange="handlePageChange"
        ></Pagination>
      </div>
    </el-affix>

    <VerifyDialog
      ref="verifyDialogRef"
      @refreshTable="getEntryQualificationListFn"
    ></VerifyDialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 获取所有提交过的入驻资质信息
import { getEntryQualificationList } from '@/api/entryqualification.js'

// 引入审核弹窗
import VerifyDialog from './verifyDialog.vue'

const tableData = ref([])
// 查询参数
const queryParams = ref({
  pageNumber: 1,
  pageSize: 10,
  total: 0,
  sortField: 'updateTime',
  sortOrder: 'DESC',
})
// 获取所有提交过的入驻资质信息
const getEntryQualificationListFn = async () => {
  const data = {
    // 审查状态
    reviewStatus: 'PENDING',
    type: 'BUSINESS',
  }
  const res = await getEntryQualificationList(queryParams.value, data)
  queryParams.value.total = res.totalElements
  tableData.value = res.content
}

onMounted(() => {
  getEntryQualificationListFn()
})

// 分页变化
const handlePageChange = ({ currentPage, pageSize }) => {
  // console.log('分页变化:', currentPage, pageSize)
  queryParams.value.pageNumber = currentPage
  queryParams.value.pageSize = pageSize
  getEntryQualificationListFn()
}

// 审核弹窗实例
const verifyDialogRef = ref(null)

// 打开审核弹窗
const handleVerify = ({ row }) => {
  console.log(row)
  // 当前数据赋值给弹窗中要审核的表单
  verifyDialogRef.value.formData = row
  // 打开审核弹窗
  verifyDialogRef.value.handleOpen()
}
</script>

<style scoped>
.review_qualify_table {
  .filter_box {
    margin-top: 15px;
  }
}
</style>
